<template>
    <div class="content">
        <el-row class="hpx-title-border enterprise_info">
            <span class="title_text">企业信息</span>
            <span class="col"><span class="hpx-label">企业名称：</span>{{model.drawer_name | hideStr}}</span>
            <span class="col"><span class="hpx-label">历史交易成功率：</span>{{tradeCount}}</span>
            <span class="col"><span class="hpx-label">平均背书时长：</span>{{endorsement.minute}}分{{endorsement.second}}秒</span>
        </el-row>
        <el-row class="main_block">
            <el-row class="title_block bill_info hpx-title-border">
                <span class="title_text">票据信息</span>
            </el-row>
            <el-form label-width="120px" size="mini" class="detail_info">
                <el-form-item label="票据号:">{{model.bill_number}}</el-form-item>
                <el-form-item label="承兑人全称:">{{model.acceptor_name}}</el-form-item>
                <el-form-item label="承兑机构:">{{model.acceptor_type_name}}</el-form-item>
                <el-form-item label="票面金额:" class="hpx-red-tips"><span class="remind">{{model.bill_sum_price}}元</span></el-form-item>
                <el-form-item label="到期时间:">{{model.bill_deadline_time | formatDate}}</el-form-item>
                <el-form-item label="汇票瑕疵:" class="hpx-red-tips">{{formatArr}}</el-form-item>
                <el-form-item label="背书次数:">{{model.endorsement_number}}</el-form-item>
                <el-row class="imgs">
                    <el-col :span="4" :offset="1" v-if="model.bill_front_photo_id">
                        <ImageZoom
                            :width='228'
                            :height='154'
                            mode='preview'
                            :image="model.bill_front_photo_path"
                        ></ImageZoom>
                        <el-row class="tag">票据正面</el-row>
                    </el-col>
                    <el-col :span="4" :offset="1" v-if="model.bill_back_photo_id1">
                        <ImageZoom
                            :width='228'
                            :height='154'
                            mode='preview'
                            :image="model.bill_back_photo_path1"
                        ></ImageZoom>
                        <el-row class="tag">背书面1</el-row>
                    </el-col>
                    <el-col :span="4" :offset="1" v-if="model.bill_back_photo_id2">
                        <ImageZoom
                            :width='228'
                            :height='154'
                            mode='preview'
                            :image="model.bill_back_photo_path2"
                        ></ImageZoom>
                        <el-row class="tag">背书面2</el-row>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
    </div>
</template>

<script lang="ts">
    import {Vue, Component} from 'vue-property-decorator'
    import ImageZoom from '@component/common/ImageZoom.vue'
    @Component({
        components:{
            ImageZoom
        }
    })
    export default class StockBillDetail extends Vue {
        model:any = {}
        tradeInfo:any = {}
        endorsement:any = {}
        //获取库存票详情
        async getBillDetail () {
            let res = await this.$http.get(`bills/bill/${this.$route.params.bill_id}`)
            if(res.status < 300){
                this.model = res.data
            }
        }
        get formatArr () {
            return this.model.bill_flaw_names ? this.model.bill_flaw_names.join(',') : ''
        }
        //查询企业交易成功率
        async getTradeCount () {
            let res = await this.$http.get(`customers/enterpriseOrderCount/${this.$route.params.id}`)
            if(res.status == 200){
                if(res.data){
                    this.tradeInfo = res.data
                }
            }
        }
        //计算企业交易成功率
        get tradeCount () {
            if (this.tradeInfo.real_deal_order_num == 0) {
                return '首单'
            }else{
                return parseInt(this.tradeInfo.finish_order_num/this.tradeInfo.real_deal_order_num*100)+'%'
            }
        }
        //查询企业平均背书时长
        async getendorsementTime () {
            let params = {
                enterpriseId: this.$route.params.id
            }
            let res = await this.$http.get('customers/customer/endorsementTime',{params})
            if(res.status == 200 && res.data){
                this.endorsement = res.data
            }
        }
        mounted () {
            this.getBillDetail()
            this.getTradeCount()
            this.getendorsementTime()
        }
    }
</script>

<style lang="scss" scoped>
    .enterprise_info{
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        color: $__color-show;
        .title_text{
            margin-left: 10px;
        }
        .col{
            margin-left: 50px;
        }
        .top_btn{
            float: right;
            margin-right: 40px;
            color: $__color-link;
        }
    }
    .main_block{
        margin-top: 20px;
        border-radius: 4px;
        border: 1px dashed $__color-border;
        .bill_info{
            height: 30px;
            line-height: 30px;
        }
        .detail_info{
            padding: 30px 0;
            .imgs{
                height: 180px;
                .el-col, img{
                    height: 146px;
                }
                img{
                    width: 100%;
                }
                .tag{
                    text-align: center;
                    line-height: 34px;
                }
            }
        }
    }
</style>
